<template>
  <div class="numCount clear">
    <input type="button" class="numCut" value="-" @click="numCut">
    <span ref="numSpan">0</span>
    <input type="button" class="numAdd" value="+" @click="numAdd">
  </div>
</template>
<script>
export default {
  methods:{
    numCut(){
      if(this.$refs.numSpan.innerText>0){
        this.$refs.numSpan.innerText--
      }
    },
    numAdd(){
        this.$refs.numSpan.innerText++
    }
  }
}
</script>
<style scoped>
  .numCount{
    font-size: 0;
    border: 1px solid #d3d3d3;
    width: 100px;
  }
  .numCount input{
    width: 26px;
    height: 26px;
    background-color: #f2f2f2;
    float: left;
    border: none;
    font-size: 20px;
    color: #999;
  }
  .numCount span{
    border-left: 1px solid #d3d3d3;
    border-right: 1px solid #d3d3d3;
    width: 46px;
    height: 26px;
    float: left;
    font-size: 16px;
    text-align: center;
    line-height: 26px;
  }
</style>